<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //解构赋值：将数组中元素,字符串中的字符，对象中的属性，分解成单独的变量
    //数组
    let arr = [1,2,3,4,5,6];
    console.log(arr[2]);
    console.log(arr[3]);

    //解构赋值
    let [a,b,c,d,e,f,g] = arr;
    console.log(a);
    console.log(b);
    console.log(g);//undefuned

    //不完全解构
    let [a1,b1,c1] = arr;
    console.log(a1);
    console.log(b1);

    //可以赋初值
    let [a2,b2,c2,d2,e2,f2,g2 = 100] = arr;
    console.log(g2); //100
    //嵌套
    let [aa,[bb,cc]] = [10,[20,30]];
    console.log(aa); //10
    console.log(bb); //20
    console.log(cc); //30

    //字符串
    let str = "abcdefg";
    console.log(str[2]);
    console.log(str.charAt(2));
    console.log(str.slice(0,1));
    console.log(str.substr(0,1)); //开始索引，结束索引
    console.log(str.substring(0,1)); //开始索引，个数
    //解构赋值
    let [s1,s2,s3,s4,s5,s6,s7] = str;
    console.log(s1); //a
</script>

<script>
    //对象
    let obj = {name:"zs",age:18,sex:"男"}; 
    //对象解构赋值 变量名必须和属性名一致
    var{name,age,sex} = obj;
    console.log(name);
    console.log(age);
    //交换位置
    var { age,name,sex} = obj;
    console.log(name); //zs
    //不完全解构
    var {name,age} = obj;
    console.log(name); //zs
    console.log(sex); //undefined
    //赋初值
    var {name,age,sex = "女"} = obj;
    console.log(sex); //男
</script>
<script>
    //解构赋值作用
    var x1 = 10;
    var y1 = 20;
    //交换位置
    var [y1,x1] = [x1,y1];
    console.log(x1); //20
    console.log(y1); //10
    //函数返回值
    function fn(x,y) {
        return [x,y];
    }
    console.log(fn(100,200)); 
    var [x2,y2] = fn(10,20);
    console.log(x2); //10
    console.log(y2); //20
</script>
</html>